<template>
	<view class="">
		<swiper
			class="swiper"
			circular
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration">
			<swiper-item>
				<view class="swiper-item">
					<image
						src="@/assets/index/index-a1.png"
						mode="widthFix">
					</image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="@/assets/index/index-a2.png"
						mode="widthFix">
					</image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="@/assets/index/index-a3.png"
						mode="widthFix">
					</image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="modules">
			<view class="item">
				<image
					src="@/assets/index/index-b1.png"
					mode="widthFix">
				</image>
			</view>
			<view class="item2">
				<view class="cate">
					<text>面部逆龄系列 &gt;&gt;</text>
				</view>
				<view class="url">
					<text>上新通知我</text>
				</view>
			</view>
			<view class="item">
				<image
					src="@/assets/index/index-b2.png"
					mode="widthFix">
				</image>
			</view>
			<view class="item2" style="background: #fbfbfb;">
				<view class="cate">
					<text>头部护理系列 &gt;&gt;</text>
				</view>
				<view class="url">
					<text>上新通知我</text>
				</view>
			</view>
			<view class="item">
				<image
					src="@/assets/index/index-b3.png"
					mode="widthFix">
				</image>
			</view>
			<view class="rows">
				<view class="cell">
					<view class="item2" style="background: #fdfdfd;">
						<view class="cate">
							<text>眼部护理系列 &gt;&gt;</text>
						</view>
						<view class="url">
							<text>上新通知我</text>
						</view>
					</view>
					<view class="item">
						<image
							src="@/assets/index/index-b4.png"
							mode="widthFix">
						</image>
					</view>
				</view>
				<view class="cell">
					<view class="item2" style="background: #fdfdfd;">
						<view class="cate">
							<text>肺部维养系列 &gt;&gt;</text>
						</view>
						<view class="url">
							<text>上新通知我</text>
						</view>
					</view>
					<view class="item">
						<image
							src="@/assets/index/index-b5.png"
							mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<view class="item">
				<image
					src="@/assets/index/index-b6.png"
					mode="widthFix">
				</image>
			</view>
			<view class="item">
				<image
					src="@/assets/index/index-b7.png"
					mode="widthFix">
				</image>
			</view>
			<view class="item">
				<image
					src="@/assets/index/index-b8.png"
					mode="widthFix">
				</image>
			</view>
			<view class="item">
				<image
					src="@/assets/index/index-b9.png"
					mode="widthFix">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {}
		}
	}
</script>

<style lang="less" scoped>
	.swiper {
		height: 195vw;
		&-item {
			position: relative;
			padding: 195% 0 0 0;
			image {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.modules {
		background: #f7f7f7;
		.rows {
			display: flex;
			align-items: center;
			.cell {
				flex: 1;
			}
			.item2 {
				.cate {
					text {
						font-size: 12px;
					}
				}
				.url {
					text {
						font-size: 8px;
					}
				}
			}
		}
		.item {
			image {
				display: block;
				width: 100%;
			}
		}
		.item2 {
			background: #f7f7f7;
			padding: 0 5vw;
			display: flex;
			align-items: center;
			.cate {
				flex: 1;
				line-height: 50px;
			}
			.url {
				text {
					font-size: 12px;
					padding: 3px 6px;
					border: 1px solid #333;
					border-radius: 15px;
				}
			}
		}
	}
</style>